<template>
  <div class="app-container  bg-gray">
    <!--<el-alert
      type="warning"
      show-icon
      effect="dark"
      class="alert bg-green">
      <div slot="title">
        <span>发布小程序前请仔细查看小程序发布流程,</span>
        <el-button type="text" style="color: #fff;font-size: 17px;text-decoration: underline;" @click="publishExplainVisible=true;">点击查看</el-button>
      </div>
    </el-alert>-->
    <el-card v-loading="loading" class="box-1">
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="版本说明"/>
        <el-step title="预览小程序"/>
        <el-step title="上传成功"/>
      </el-steps>
      <el-divider/>
      <slot v-if="active===1">
        <el-row v-if="versionData" :gutter="20" class="wxapp-content">
          <el-col :span="8">
            <img src="@/assets/images/update2.png" style="width: 240px;height: 240px;">
          </el-col>
          <el-col :span="16">
            <h2>{{ versionData['title'] }}</h2>
            <div>深圳市网商天下科技开发有限公司</div>
            <p class="remark">
              {{ versionData['remarks'] }}
            </p>
            <el-button type="text" @click="updateRemarkVisible=true;">详细更新说明</el-button>
          </el-col>
        </el-row>
        <div style="text-align: center;">
          <el-button v-if="hasUpdate" type="success" class="bg-green" @click="loadPreviewCode">立 即 更 新</el-button>
          <el-button v-else type="primary" @click="checkWxAppUpdate">检 查 更 新</el-button>
        </div>
      </slot>
      <slot v-if="active===2">
        <div style="text-align: center;">
          <ws-img :src="previewQRCode" style="border: 1px solid #e7e7e7; border-radius: 4px; width: 210px;height: 210px;"/>
          <p>扫描二维码可以预览小程序</p>
          <el-button type="success" class="bg-green" @click="publishVersion">上 传 小 程 序</el-button>
        </div>
      </slot>
      <slot v-if="active===3">
        <div style="text-align: center;">
          <el-image :src="previewQRCode" style="border: 1px solid #e7e7e7; border-radius: 4px; width: 210px;height: 210px;"/>
          <p>扫描二维码可以预览小程序</p>
          <span style="font-size: 13px;color: #b7b7b7;">上传成功！请登录微信小程序平台（<el-link type="primary" href="https://mp.weixin.qq.com/">https://mp.weixin.qq.com/</el-link>）发布小程序</span>
        </div>
      </slot>
    </el-card>

    <!--更新说明弹窗-->
    <el-dialog :visible.sync="updateRemarkVisible" width="900px" center>
      <div class="rule-box-content">
        <div class="rule-box-title">
          {{ versionData['title'] }}
        </div>
        <div v-html="versionData['content']">{{ versionData['content'] }}</div>
      </div>
    </el-dialog>

    <!--发布说明弹窗-->
    <el-dialog :visible.sync="publishExplainVisible" width="900px" center>
      <div class="rule-box-content">
        <div class="rule-box-title">
          '小程序发布说明'
        </div>
        <div>更新说明</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      // 是否有更新
      hasUpdate: false,
      // 更新说明
      updateRemarkVisible: false,
      // 发布说明
      publishExplainVisible: false,
      // 小程序更新版本内容
      versionData: {},
      // 安装步骤
      active: 1,

      // 项目名称
      projectName: '跨境租车',
      // 发布loadin
      publishLoading: null,
      // 小程序预览码
      previewQRCode: null
    }
  },
  created() {
    this.checkWxAppUpdate();
  },
  methods: {
    // 检查小程序是否有新版本
    checkWxAppUpdate() {
      (async () => {
        this.loading = true;
        const result = await this.$service.applicationCheckWxAppUpdate({ projectName: this.projectName });
        if (result.code === 0) {
          this.versionData = result.data;
          this.hasUpdate = result.status;
          this.$message.success(result.msg);
        } else {
          this.$message.error(result.msg);
        }
        this.loading = false;
      })();
    },

    // 预览小程序
    loadPreviewCode() {
      (async () => {
        this.loading = true;
        const result = await this.$service.applicationLoadPreviewCode({
          projectName: this.projectName
        });
        if (result.code === 0) {
          this.previewQRCode = result.data['base64'];
          this.active = 2;
          this.loading = false;
        } else {
          this.$message.error(result.msg);
        }
        this.loading = false;
      })();
    },

    // 发布版本
    publishVersion() {
      (async () => {
        this.loading = true;
        const result = await this.$service.applicationPublishVersion({
          projectName: this.projectName
        });
        if (result.code === 0) {
          this.$message.success(result.msg);
          this.active = 3;
          this.$confirm('小程序版本上传成功, 还需跳转微信公众平台进行审核及上线', '提示', {
            confirmButtonText: '微信公众平台',
            cancelButtonText: '以后再说',
            type: 'warning'
          }).then(() => {
            window.open('https://mp.weixin.qq.com/');
          })
        } else {
          this.$alert(result.msg, '上传失败', {
            confirmButtonText: '确定'
          });
        }
        this.loading = false;
      })();
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../styles/index.scss';
  .alert{
    max-width: 1000px;
    margin: 0 auto;
    height: 60px;

    span{
      font-size: 17px;
    }
  }
  .box-1 {
    max-width: 1000px;
    margin: 20px auto 0 auto;
    min-height: 400px;
    .wxapp-content{
      padding: 30px 50px;

      .name{

      }
      .company{

      }

      .remark {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        width: 100%;
        line-height: 24px;
        margin-top: 24px;
      }
    }
  }
  .rule-box-content {
    min-height: 400px;
    overflow: auto;
    padding: 20px;
    margin: 0 30px;
    border: 1px solid #f1f2f3;
    border-radius: 3px;

    .rule-box-title {
      margin-bottom: 30px;
      text-align: center;
      font-size: 20px;
      font-weight: 600;
    }
  }
</style>
